<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>按钮信息表单</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <!--按钮栏-->
            <div class="form-group button-bar button-bar">
                <button type="button" isShow="joForm.isAdd" class="btn btn-primary" onclick="joForm.save()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;新增
                </button>
                <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="joForm.update()">
                    <i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
                </button>
                <button type="button" isShow="!joForm.isAdd" class="btn btn-danger" onclick="joForm.del()">
                    <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
                </button>
            </div>
            <!--按钮栏-->
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <form id="pageForm" name="pageForm" action="" method="post">
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">编号</div>
                    <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('请输入有意义的按钮编号,这将作为此按钮的唯一标识',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="id" value="" class="form-control readonly-edit"  ErrEmpty="编号不允许为空" />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">名称</div>
                    <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('按钮的文案',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="name" value="" class="form-control "  ErrEmpty="" />
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">点击事件</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="click" value="" class="form-control "   />
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">图标</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <!--<input type="text"   name="icon" value="" class="form-control "   />-->
                        <div class="input-group">
                            <span id="iconShow" class="input-group-addon" style="width: 30px;"></span>
                            <input type="text" id="icon" name="icon" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceIcon('icon', iconSelectClick)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">按钮样式</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text" id="buttonClass" value="btn btn-primary" name="buttonClass" class="joInput form-control "   />
                        <div style="padding-top: 5px;">
                            <button type="button" class="btn btn-primary btn-sm" onclick="$('#buttonClass').val('btn btn-primary')">primary</button>
                            <button type="button" class="btn btn-success btn-sm" onclick="$('#buttonClass').val('btn btn-success')">success</button>
                            <button type="button" class="btn btn-info btn-sm" onclick="$('#buttonClass').val('btn btn-info')">info</button>
                            <button type="button" class="btn btn-warning btn-sm" onclick="$('#buttonClass').val('btn btn-warning')">warning</button>
                            <button type="button" class="btn btn-danger btn-sm" onclick="$('#buttonClass').val('btn btn-danger')">danger</button>
                            <button type="button" class="btn btn-default btn-sm" onclick="$('#buttonClass').val('btn btn-default')">default</button>
                        </div>
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">类别</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text" id="category" value="" name="category" class="joInput form-control "   />
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">显示条件</div>
                    <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('内容应为布尔表达式',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="display" value="" class="form-control " placeholder="布尔表达式"  />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">作废标识</div>
                    <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('选择废弃时将永远不会在页面上展示',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                    <div class="young-form-input-block">
                        <select name="trashFlag" value="" class="form-control" ErrEmpty="作废标识不允许为空" >
                            <option value=""></option>
                            <option value="0" selected="selected">正常</option>
                            <option value="1">废弃</option>
                        </select>
                    </div>
                </div>
                <div class="young-form-item col-md-6 ">
                    <div class="young-form-label">备注</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="remark" value="" class="form-control "   />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">顺序</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="num" value="1000" class="form-control "  ErrNumber="顺序需填写数字类型" />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">创建时间</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text" id="createTime" value="" name="createTime" class="form-control " readonly />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">更新时间</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text" id="updateTime" value="" name="updateTime" class="form-control " readonly />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">创建人</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="createUserId" value="" class="form-control " readonly />
                    </div>
                </div>
                <div class="young-form-item col-md-6 must">
                    <div class="young-form-label">更新人</div>
                    <div class="young-form-tips"></div>
                    <div class="young-form-input-block">
                        <input type="text"   name="updateUserId" value="" class="form-control " readonly />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">

    JoInputSimple('buttonClass', 'btn btn-primary,btn btn-info,btn btn-success,btn btn-warning,btn btn-danger,btn btn-default');//初始化输入选择框
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime' //注册日期控件
    });
    $(function(){
        var jParams = {
            "PKName" : "id",//主键属性名
            "saveAfter" : "toEdit",
            "addUrl" : "{URL_UMS}ums/button/insert",//新增
            "deleteUrl" : "{URL_UMS}ums/button/delete",//删除
            "updateUrl" : "{URL_UMS}ums/button/update",//修改
            "formDataUrl" : "{URL_UMS}ums/button/get",//查询
            //"readonly2Label" : true //只读转文本
        };
        joForm.initFormPage(jParams);//初始化
        jo.postAjax(COMMON_CONST.LIST_BUTTON_CATEGORY, {}, function(json){
            if(json && json.code == 0){
                JoInputSimple('category', json.data.join(','));//初始化输入选择框//'公共按钮,视图页按钮,表单页按钮'
            }
        }, true);
    });
    //初始化新增页面回调函数(在初始化按钮前发生)
    joForm.initFormPageOfAdd = function(){

    };
    //初始化表单值前处理
    joForm.initFormValueBefore = function(oJson){
        oJson.createTime = jo.formatDate(oJson.createTime);
        oJson.updateTime = jo.formatDate(oJson.updateTime);
    };
    //初始化表单值后处理
    joForm.initFormValueAfter = function(oJson){
        $("#iconShow").html('<i class="fa '+oJson.icon+'" aria-hidden="true"></i>');
    };
    //新增请求提交前回调函数
    joForm.dealDataAtSaveBefore = function(oJson){

    };
    //修改请求提交前回调函数
    joForm.dealDataAtUpdateBefore = function(oJson){

    };
    /* 关于joForm更多回调函数和配置参数可查看jo-page-form.js */
    //图标选择
    function iconSelectClick(sClass){
        $("#icon").val(sClass);
        $("#iconShow").html('<i class="fa '+sClass+'" aria-hidden="true"></i>');
        jo.close();
    }
</script>
</body>
</html>
